<template>
  <div class="h-full flex flex-col">
    <div class="chart_title">词云图</div>
    <div ref="chartRef" class="flex-1 mt-4"></div>
  </div>
</template>

<script setup>
import "echarts-wordcloud";
import echarts from "~/utils/echarts.config";
import useEcharts from "@/hooks/useEcharts";

const props = defineProps({
  datas: {
    type: Object,
    required: true,
  },
});
const { echartResize, echartFontSetting } = useEcharts();
const chartRef = ref();
const myChart = ref();

const chartInit = () => {
  const option = {
    tooltip: {
      show: true, // 是否显示提示框
      borderColor: "#fe9a8bb3", // 提示框边框颜色
      borderWidth: 1, // 提示框边框宽度
      padding: [10, 15, 10, 15], // 提示框内边距，顺序为上、右、下、左
      confine: true, // 提示框是否限制在图表的区域内
      backgroundColor: "rgba(255, 255, 255, .9)", // 提示框背景颜色
      textStyle: {
        color: "hotpink", // 提示框文字颜色
        lineHeight: 22, // 提示框文字行高
      },
      extraCssText: "box-shadow: 0 4px 20px -4px rgba(199, 206, 215, .7);border-radius: 4px;", // 提示框的额外CSS样式
    },
    // 数据系列配置
    series: [
      {
        type: "wordCloud", // 图表类型为词云
        shape: "pentagon", // 词云形状为五边形
        left: "center", // 词云的左侧位置居中
        top: "center", // 词云的顶部位置居中
        width: "100%", // 词云的宽度为100%
        height: "100%", // 词云的高度为100%
        right: null,
        bottom: null,
        sizeRange: [14, 50], // 词云中的文字大小范围
        rotationRange: [0, 0], // 词云中文字的旋转范围
        rotationStep: 0, // 词云中文字的旋转步长
        gridSize: 25, // 词云中的网格大小
        drawOutOfBound: false, // 是否允许词云中的文字超出边界绘制
        layoutAnimation: true, // 是否使用动画效果进行布局
        textStyle: {
          // 词云中的文字样式 全局设置的话这里要取消 这里优先级高
          // fontFamily: "PingFangSC-Semibold", // 字体样式
          // fontWeight: 600, // 字体粗细
          color: () => {
            // 文字颜色，可以通过函数返回不同的颜色值
            const colors = [
              "#fe9a8bb3",
              "#fe9a8bb3",
              "#fe9a8b03",
              "#9E87FFb3",
              "#9E87FFb3",
              "#9E87FFb3",
              "#fe9a8bb3",
              "#fe9a8bb3",
              "#fe9a8bb3",
              "#73DDFF",
              "#58D5FF",
            ];
            return colors[parseInt(Math.random() * 10)];
          },
        },
        emphasis: {
          focus: "none", // 高亮样式
        },
        data: props.datas, // 数据数组，每个数组项必须包含name和value属性
      },
    ],
  };
  option && myChart.value.setOption({ ...option, ...echartFontSetting() });
};

watch(() => props.datas, chartInit);

onMounted(() => {
  myChart.value = echarts.init(chartRef.value);
  echartResize(myChart.value);
  chartInit();
});
</script>

<style lang="scss" scoped></style>
